<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>

<body>
    <div id="app">
        <label>ID: 
            <input type="text" v-model="id">
        </label>
        <label>NAME: 
            <input type="text" v-model="name">
        </label>
        <input type="button" @click="add" value="添加">
        <!-- 此时如果没有加key 再选中某个值时 只记录了索引x 当添加一个元素后 选中的仍然时索引为x的值 就出bug了 -->
        <!-- 使用key 注意：
            1.v-for 中 key属性的值只能使用 number或string
            2.key在使用的时候 必须使用v-bind属性绑定的形式 指定key的值
        -->
        <p v-for="item in list" :key="item.id">
           <input type="checkbox"> {{item.id}}---{{item.name}}
        </p>

    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               id:null,
               name:null,
               list:[
                   {
                       id:1,
                       name:'鲁班'
                   },
                   {
                       id:2,
                       name:'孙尚香'
                   },{
                       id:3,
                       name:'程咬金'
                   },{
                       id:4,
                       name:'刘邦'
                   },{
                       id:5,
                       name:'项羽'
                   },
               ]
           },
           methods:{
               add(){
                //    添加
                //    this.list.push({id: this.id,name: this.name})
                //前面插入
                this.list.unshift({id: this.id,name: this.name})
               }
           }
        });
    </script>
</body>

</html>